<template>
  <div>
    <el-dialog
      :title="dialogType === 'add' ? '另外一个' : '详情'"
      :visible="dialogVisible"
      custom-class="custom-dialog"
      :before-close="handleClose"
      width="48%"
      class="dialogClass"
      @open="initData"
    >
      
      <el-form
        ref="form"
        class="query-more-form formTop"
        size="mini"
        label-width="85px"
        :disabled="dialogType === 'detail'"
        :model="form"
      >
        <el-row :gutter="20">
          <el-col :span="5" class="el-col">
            <el-form-item label="序号" label-width="55px"
              ><el-input
                v-model="form.number"
                placeholder="序号"
                maxlength="255"
            /></el-form-item>
          </el-col>
          <el-col :span="9" class="el-col"
            ><el-form-item label="大类"
              ><el-input
                v-model="form.bigType"
                placeholder="大类"
                maxlength="255" /></el-form-item
          ></el-col>
          <el-col :span="10" class="el-col">
            <el-form-item label="职能事项"
              ><el-input
                v-model="form.functionalMatters"
                placeholder="职能事项"
                maxlength="255"
            /></el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="el_row_padding">
          <el-col :span="8" class="el-col"
            ><el-form-item label="类别"
              ><el-input
                v-model="form.category"
                placeholder="类别"
                maxlength="255" /></el-form-item
          ></el-col>
          <el-col :span="8" class="el-col"
            ><el-form-item label="责任主体"
              ><el-input
                v-model="form.subjectResponsibility"
                placeholder="责任主体"
                maxlength="255" /></el-form-item
          ></el-col>
          <el-col :span="8" class="el-col"
            ><el-form-item label="备注"
              ><el-input
                v-model="form.remarks"
                placeholder="备注"
                maxlength="255" /></el-form-item
          ></el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24" class="el-col"
            ><el-form-item label="巡查与走访工作职能" label-width="150px"
              ><el-input
                v-model="form.inspection"
                placeholder="巡查与走访工作职能"
                maxlength="255" /></el-form-item
          ></el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
export default {
  name: "gridDialog",
  components: {
    Pagination,
  },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
      default: 0,
    },
    dialogType: {
      type: String,
      default: "detail",
    },
    obj: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      form: {},
    };
  },

  methods: {
    // 页面初始化
    initData() {
      this.form = this.obj;
    },
    // 关闭弹窗
    handleClose() {
      this.clearData();
      this.$emit("closeDialog");
    },
    // 清空表单
    clearData() {
      this.form = {
        number: "",
        rightType: "",
        rightName: "",
        legalBasis: "",
        subitemCode: "",
        regulatoryIssues: "",
        regulatoryContent: "",
        specificBehavior: "",
        disposalStandard: "",
        assessmentCriteria: "",
        remarks: "",
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.formTop div {
  // 行间间距
  margin-bottom: 5px;
}
</style>
